<template>
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
      size="default" @submit.prevent>
      <el-row>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="是否私密" prop="radio75756">
            <el-radio-group v-model="formData.radio75756">
              <el-radio v-for="(item, index) in radio75756Options" :key="index" :label="item.value"
                :disabled="item.disabled" style="{display: inline}">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="班级名称" prop="input56181">
            <el-input v-model="formData.input56181" type="text" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="grid-cell">
          <el-form-item label="" prop="pictureupload30996">
            <el-upload :file-list="pictureupload30996FileList" :headers="pictureupload30996UploadHeaders"
              :data="pictureupload30996UploadData" list-type="picture-card" show-file-list :limit="3"> <template
                #default><i class="el-icon-plus"></i></template></el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="班级简介" prop="textarea30314">
        <el-input type="textarea" v-model="formData.textarea30314" rows="3"></el-input>
      </el-form-item>
      <div class="static-content-item">
        <div>班主任</div>
      </div>
    </el-form>
    
  </template>
  
  <script>
    import {
      defineComponent,
      toRefs,
      reactive,
      getCurrentInstance
    }
    from 'vue'
    export default defineComponent({
      components: {},
      props: {},
      setup() {
        const state = reactive({
          formData: {
            radio75756: null,
            input56181: "",
            pictureupload30996: null,
            textarea30314: "",
          },
          rules: {},
          radio75756Options: [{
            "label": "公开班级",
            "value": 1
          }, {
            "label": "私密班级",
            "value": 2
          }],
          pictureupload30996FileList: [],
          pictureupload30996UploadHeaders: {},
          pictureupload30996UploadData: {},
        })
        const instance = getCurrentInstance()
        const submitForm = () => {
          instance.proxy.$refs['vForm'].validate(valid => {
            if (!valid) return
            //TODO: 提交表单
          })
        }
        const resetForm = () => {
          instance.proxy.$refs['vForm'].resetFields()
        }
        return {
          ...toRefs(state),
          submitForm,
          resetForm
        }
      }
    })
    
  </script>
  
  <style lang="scss">
    .el-input-number.full-width-input,
    .el-cascader.full-width-input {
      width: 100% !important;
    }
    
    .el-form-item--medium {
      .el-radio {
        line-height: 36px !important;
      }
      
      .el-rate {
        margin-top: 8px;
      }
    }
    
    .el-form-item--small {
      .el-radio {
        line-height: 32px !important;
      }
      
      .el-rate {
        margin-top: 6px;
      }
    }
    
    .el-form-item--mini {
      .el-radio {
        line-height: 28px !important;
      }
      
      .el-rate {
        margin-top: 4px;
      }
    }
    
    .clear-fix:before,
    .clear-fix:after {
      display: table;
      content: "";
    }
    
    .clear-fix:after {
      clear: both;
    }
    
    .float-right {
      float: right;
    }
    
  </style>
  
  <style lang="scss" scoped>
    div.table-container {
      table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
  
        td.table-cell {
          display: table-cell;
          height: 36px;
          border: 1px solid #e1e2e3;
        }
      }
    }
    
    div.tab-container {}
    
    .label-left-align :deep(.el-form-item__label) {
      text-align: left;
    }
    
    .label-center-align :deep(.el-form-item__label) {
      text-align: center;
    }
    
    .label-right-align :deep(.el-form-item__label) {
      text-align: right;
    }
    
    .custom-label {}
    
    .static-content-item {
      min-height: 20px;
      display: flex;
      align-items: center;
  
      :deep(.el-divider--horizontal) {
        margin: 0;
      }
    }
    
  </style>